<script setup>
import {ref, provide} from "vue";
import zhjs_icon from "/@/assets/image/zhjs_icon1.png"
import {getRoomDetail} from "/@/api/getRooms";
import ShowPage from "/@/views/zhjs/components/show/showPage.vue";
import {Toast} from "vant";
const activeNames = ref("");
const roomList = ref({})
const point = ref(0)
provide('point', point)
const roomName = ref('')
provide('roomName', roomName)
const listPage = ref(true)
const router = useRouter()

const getInfo = (next, id) => {
  point.value = id
  // listPage.value = false
  router.push({ path: next, query: { point: id }})
}

const getList = async () => {
  const res = await getRoomDetail()
  if ( res.response.value.code === 200){
    roomList.value = res.response.value.extend.building.points
  }else {
    Toast(res.response.value.msg)
  }
}
const menuList = ref([
      {
        name:"教室运行",
        next:"/show"
      },
      // {
      //   name:"通知公告",
      //   next:"/notice"
      // },
    ])
onMounted(() => {
  getList()
})
</script>

<template>
  <div v-if="listPage">
  <Header title="智慧教室"></Header>
  <div class="container" id="container" style="top: 60px;">
    <van-collapse v-model="activeNames" v-for="(room,index) in roomList" :key="index" accordion>
      <van-collapse-item :name="index" :is-link="false" >
        <template #icon>
          <van-cell class="item" :clickable="true" :icon="zhjs_icon">
            <span>{{room.desprition}}</span>
            <van-icon name="arrow-down" style="padding-left: 2vw;"/>
          </van-cell>
        </template>
        <div v-for="item in menuList"  :key="item.name">
          <van-cell class="child" is-link style="padding: 0;" @click="getInfo(item.next, room.id)">
            <p style="color: #9a9b9d;font-size: 4vw;">{{item.name}}</p>
          </van-cell>
          <van-divider :margin="12" />
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
<!--    <van-collapse v-model="activeNames" v-for="(room,index) in roomList" :key="index" accordion>-->
<!--      <van-collapse-item title="智慧教室" :name="index" :value="room.desprition" :icon="zhjs_icon">-->
<!--                <div v-for="item in menuList"  :key="item.name">-->
<!--                  <van-cell class="child" is-link style="padding: 0;" @click="getInfo(item.next, room.id)">-->
<!--                    <p style="color: #9a9b9d;">{{item.name}}</p>-->
<!--                  </van-cell>-->
<!--                </div>-->
<!--      </van-collapse-item>-->
<!--    </van-collapse>-->

  </div>
  <div v-if="!listPage">
    <ShowPage></ShowPage>
  </div>
</template>

<style scoped lang="less">
:deep(.van-cell){
  height: 20vw;
  padding: 1vw 2vw 1vw 2vw;
  .van-icon__image {
    padding-top: 2vw;
    width: 12vw;
    height: 12vw;
  }

  .van-cell__value{
    display: flex;
    align-items: center;
    font-size: 4.5vw;
    padding-left:5vw;
    color: #636365;
  }

  .van-cell__right-icon{
    display: flex;
    padding-right: 5vw;
    margin-top: 4.5vw;
  }
}
span{
  padding-left: 45vw;
}

:deep(.van-collapse){
  .van-collapse-item{
    padding: 0;
    margin-bottom: 25px;
  }

  .van-collapse-item__content{
    padding: 0;
    .van-divider{
      margin: 0;
    }
  }

  .van-cell--clickable{
    background-color: inherit;
  }
}
.child{
  height: 15vw !important;
}


</style>
